<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background router-link-box">
            <div class="select-box">
                <select v-model="storeSelect" @change="getSelected">
                    <option :value="item.id" v-for="item in storeArr">{{item.name}}</option>
                </select>
            </div>
            <div class="index-top-box">
                <div>
                    <div class="shopowner-info">
                        <div class="main-color big-font-size">王珊珊</div>
                        <div class="shopowner">店长</div>
                    </div>
                    <div class="small-font-size three-color align-left">1522222222</div>
                </div>
                <div class="warn-box" @click="goNoticeFun">
                    <img src="../assets/img/warn.png"/>
                    <div class="warn-info">&nbsp;</div>
                </div>
            </div>
            <div class="block-box">
                <ul class="shopowner-capital-ul">
                    <li>
                        <div class="">356</div>
                        <div class="small-font-size three-color">账户货款</div>
                    </li>
                    <li>
                        <div class="">356</div>
                        <div class="small-font-size three-color">授信额度</div>
                    </li>
                    <li>
                        <div class="">356</div>
                        <div class="small-font-size three-color">账户积分</div>
                    </li>
                </ul>
            </div>
            <div class="block-box menu-link-list">
                <div class="big-font-size main-color goods-center">商品中心</div>
                <ul>
                    <li v-for="(item,index) in menuList"
                        :key="index"
                        @click="goLinkHtml(item)"
                        :class="item.bgColor"
                    >
                        <div class="align-left menu-top">
                            <div class="big-font-size main-color">{{item.title}}</div>
                            <div class="small-font-size three-color">{{item.english}}</div>
                        </div>
                        <img :src="item.img"/>
                    </li>
                </ul>
            </div>
            <div class="block-box menu-link-list">
                <div class="big-font-size main-color goods-center">后勤中心</div>
                <div class="logistics-box">
                    <router-link to="/SupplierList">
                        <div class="log-box">
                            <img src="../assets/img/supplier.png"/>
                            <div class="main-color middle-font-size">供应商</div>
                        </div>
                    </router-link>
                    <router-link to="/StaffManage">
                        <div class="log-box">
                            <img src="../assets/img/staff.png"/>
                            <div class="main-color middle-font-size">店员</div>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="block-box menu-link-list align-left">
                <div class="big-font-size main-color goods-center">财务中心</div>
                <router-link to="/CapitalManage" class="capital-link">
                    <div class="capital-box">
                        <img src="../assets/img/capital.png"/>
                        <div class="middle-font-size main-color">资金管理</div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        name: "Index",
        data() {
            return {
                storeArr: [
                    {id: 1, name: '烫卤局开发区店'},
                    {id: 2, name: '烫卤局南开店'}
                ],
                storeSelect: '',
                menuList: [
                    {
                        title: '采购专区',
                        img: require('../assets/img/purchase.png'),
                        english: 'Purchasing zone',
                        bgColor: 'bg-purchase',
                        url: '/ShopIndex'
                    }, {
                        title: '订单管理',
                        img: require('../assets/img/order.png'),
                        english: 'Order management',
                        bgColor: 'bg-order',
                        url: '/OrderManage'
                    }, {
                        title: '库存商品',
                        img: require('../assets/img/goods.png'),
                        english: 'Stock goods',
                        bgColor: 'bg-goods',
                        url: '/StockGoodsManage'
                    }, {
                        title: '单据管理',
                        img: require('../assets/img/bill.png'),
                        english: 'Bill management',
                        bgColor: 'bg-bill',
                        url: '/BillManage'
                    }],
                GetWindowBackground: {
                    'min-height': ''
                },
            }
        },
        mounted() {
            this.ajaxFun();

        },
        methods: {
            ajaxFun() {
                this.$ajax.post('/mock/df5d3ea65a02a4fd04029208ac0376c2/haiyan/index', {
                    params: {}
                }).then(res => {
                    console.log(res.data)
                    Toast('请求成功')
                }).catch(err => {             //
                    console.log('请求失败：' + err.status + ',' + err.statusText);
                });
            },
            //点击切换店铺
            getSelected(){
                console.log('点击切换店铺')
            },
            //进入菜单内容
            goLinkHtml(item) {
                this.$router.push(item.url)
            },
            //通知
            goNoticeFun() {
                this.$router.push('/Notice')
            },
            // 获取浏览器高度
            getBodyHeight() {
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
            this.storeSelect = this.storeArr[0].id;
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>
    .block-box {
        width: calc(100% - 50px);
        padding: 15px;
        border-radius: 6px;
    }

    .select-box {
        width: 100%;
        height: 40px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
        select {
            height: 40px;
            text-align: center;
            text-align-last: center;
            border: none;
            background: transparent;
            font-size: 16px;
            padding-right: 5px;
        }
    }

    .router-link-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .index-top-box {
            width: calc(100% - 60px);
            height: 60px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 0 30px;
            .shopowner-info {
                display: flex;
                align-items: center;
                .shopowner {
                    width: 38px;
                    height: 17px;
                    font-size: 12px;
                    border-radius: 3px;
                    color: #fff;
                    background: #6678ff;
                    margin-left: 5px;
                }
            }
            .warn-box{
                width: 18px;
                height: 22px;
                position: relative;
                img{
                    width: 18px;
                }
                .warn-info{
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: red;
                    position: absolute;
                    top: 1px;
                    right: 1px;
                }
            }
        }
        .shopowner-capital-ul {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .menu-link-list {
            display: flex;
            justify-content: space-around;
            .goods-center {
                width: 100%;
                text-align: left;
                padding-left: 5px;
                margin: 3px;
            }
            ul {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                li {
                    width: 43%;
                    height: 60px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 3%;
                    margin-top: 8px;
                    img {
                        height: 30px;
                    }
                    .menu-top {
                        margin-bottom: auto;
                    }
                }
            }
            .bg-purchase {
                background: #fef8ec;
            }
            .bg-order {
                background: #e5f9f0;
            }
            .bg-goods {
                background: #eff1ff;
            }
            .bg-bill {
                background: #ffeded;
            }
        }
        .logistics-box {
            width: 100%;
            display: flex;
            .log-box {
                margin: 15px 40px 5px 0;
                img{
                    width: 30px;
                }
            }
        }
        .capital-link {
            display: flex;
            margin-right: auto;
            .capital-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 15px 0 5px 0;
                img {
                    width: 33px;
                    height: auto;
                    margin-bottom: 3px;
                }
            }
        }

    }


</style>